<template>
    <div id="app" class="page-movie">
        <div class="movie-page">
             <item-toplogo :title="this.items.name"></item-toplogo>
            <div class="movie-info" style="background-color:#401B1A">
                <div class="crumbs-nav">
                    <a href="/">泽枫电影</a>
                    >
                    <span>{{items.name}}</span>
                </div>
                <div class="movie-info-top">
                    <div class="movie-cover">
                        <a href="javascript:void(0)">
                            <img class="img noneBg poster" :src="items.poster">
                            <img class="img noneBg poster-play" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png" alt="">
                        </a>
                    </div>
                    <div class="movie-desc">
                        <div class="movie-desc-top">
                            <div class="movie-cn-name">
                                <h1>{{items.name}}</h1>
                            </div>
                            <div class="movie-other-info">
                                <div class="movie-type">
                                    <span class="movie-cat">{{items.category}}</span>
                                    <span class="movie-tag">
                                        <!-- <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png" alt=""> -->
                                    </span>
                                </div>
                                <div class="actors">
                                    <a href="javascript:void(0)">{{actors[1] +'/' }} </a>
                                
                                    <a href="javascript:void(0)">{{actors[2] +'/'}}  </a>
                                
                                    <a href="javascript:void(0)">{{actors[3] +'/'}}  </a>
                                </div>
                                <div class="movie-show-time">
                                    <span>{{items.premiereAt | Datefilter}}{{items.nation+'/'}} {{items.runtime +'分钟'}}</span>
                                    <img class="img noneBg" alt="向右箭头" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" style="margin-left:0.12rem">
                                </div>
                            </div>
                        </div>
                        <div class="btns">
                            <button class="button want-to-watch">
                                <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png" alt="">
                                <span>想看</span>
                            </button>
                            <a class="link button btn-right watched" href="javascript:viod(0)">
                                <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png" alt="看过">
                                <span>看过</span>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- <div class="real-time-word-of-mouth">
                    <div class="top">
                        <div class="left">
                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo.png" alt="">
                            <span>猫眼购票评分</span>
                        </div>
                        <div class="right">
                            <div class="num">
                                <span>1,162,302</span>
                                <span class="">人想看</span>
                            </div>
                            <div class="num watched">
                                <span>92,324,397</span>
                                <span class="">人看过</span>
                            </div>
                        </div>
                    </div>
                    <div class="middle">
                        <div class="left-section">
                            <div class="left">
                                <span class="score">9.5</span>
                                <div class="people-grade">
                                    <span>1,701,913</span>
                                    <span class="">人评</span>
                                </div>
                            </div>
                            <div class="right">
                                <a class="link" href="javascript:void(0)">
                                    <div class="stars-percent-bar">
                                        <div class="stars">
                                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-not-graded.png" alt="">
                                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-not-graded.png" alt="">
                                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-not-graded.png" alt="">
                                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-not-graded.png" alt="">
                                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-not-graded.png" alt="">
                                        </div>
                                        <div class="bar">
                                            <div class="percent" style="width: 88.3%;"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="right-reputation"></div>
                    </div>
                </div> -->
                <div class="separator-line"></div>
                <div class="brief-introduction">
                    <div class="title">
                        <span>简介</span>
                        <div>
                            <button @click="show" v-show="open" class="open">
                                <span>展开</span>
                                <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt="">
                            </button>
                            <button @click="show" v-show="close" class="close">
                                <span>收起</span>
                                <img class="img close noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt="">
                            </button>
                        </div>
                    </div>
                    <div class="content ">
                        <p :class="line?'line-clamp':''" id="brief-introduction-content">
                            {{items.synopsis}}
                        </p>
                    </div>
                </div>
                <div class="actors">
                    <div class="title">
                        <span>演职人员</span>
                        <a class="go-to-all-actors" href="">
                            <span>全部</span>
                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt="">
                        </a>
                    </div>
                    <div class="actor-list">
                        <ul>
                            <li v-for=" (data,index) in actors" :key="index" class="left-margin">
                                <a href="">
                                    <img class="img" :src="items.actors[index].avatarAddress">
                                    <span class="name">{{items.actors[index].name}}</span>
                                    <span class="role">{{items.actors[index].role}}</span>
                                </a>
                            </li>
                            <!-- <li v-for="(data,index) in actors" :key="index" class="left-margin">
                                <a href="">
                                    <img class="img" src="" alt="">
                                    <span class="name">{{actors}}</span>
                                    <span class="role">饰 唐仁</span>
                                </a>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <div class="actors photos">
                  <div class="title">
                        <span>剧照</span>
                        <a class="go-to-all-actors" href="">
                            <span>全部</span>
                            <img class="img noneBg" src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png" alt="">
                        </a>
                  </div>
                  <div class="photos-list">
                      <ul>
                          <li @click="Preview(index)" v-for="(data,index) in items.photos" :key="index" class="left-margin">
                              <a href="javascript:void(0)">
                                  <img class="img" :src="items.photos[index]" width="150" height="100">
                              </a>
                          </li>
                      </ul>
                  </div>
                </div>
            </div>
        </div>
        <a href="javascript:void(0)" style="height: 49px; position: fixed; bottom: 0px; width: 100%;">
            <div class="goSchedule"> 选座购票 </div>
        </a>
    </div>
</template>
<style scoped>
.goSchedule {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
}
.movie-info {
    padding: .42rem .32rem;
    color: #fff;
    position: relative;
}
.movie-info .crumbs-nav {
    margin-bottom: .3rem;
    color: #ccc;
}
.movie-info .movie-info-top {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
}
.real-time-word-of-mouth {
    background-color: rgba(0,0,0,.3);
    box-shadow: 0 0 0.06rem 0 hsl(0deg 0% 100% / 3%);
    border-radius: .12rem;
    margin-top: .3rem;
    padding: .16rem .24rem;
    height: 1.8rem;
    box-sizing: border-box;
}
.movie-page .separator-line {
    position: relative;
    border-bottom: none;
}
.movie-page .separator-line:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: #e8e8e8;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
}
.movie-info .separator-line:after {
    background-color: hsla(0,0%,100%,.1)!important;
}
.brief-introduction {
    position: relative;
    padding: .55rem 0 0;
}
.actors {
    margin: .55rem 0 .3rem;
}
.movie-page a {
    text-decoration: none;
    color: inherit;
    display: inline;
}
.movie-info .movie-cover {
    float: left;
    height: 2.76rem;
    width: 2rem;
    position: relative;
    flex-shrink: 0;
}
.movie-info .movie-desc .movie-show-time img {
    width: .1rem;
    height: .18rem;
}
.movie-info .movie-desc {
    flex-grow: 1;
    margin-left: .24rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    overflow: hidden;
}
.movie-info .movie-desc .movie-desc-top {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    flex-grow: 1;
}
.movie-info .movie-desc .btns {
    display: flex;
    justify-content: space-between;
}
.movie-info .movie-desc .movie-cn-name {
    font-size: .4rem;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
}
.movie-info .movie-desc .movie-other-info {
    display: flex;
    flex-grow: 1;
    flex-flow: column;
    justify-content: center;
}
.movie-info .movie-desc .movie-cn-name h1 {
    font-size: .4rem;
    margin: 0;
}
.movie-info .movie-desc .movie-type {
    font-size: .24rem;
    display: flex;
    align-items: center;
}
.movie-info .movie-desc .actors {
    opacity: .6;
    font-size: .24rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}
.movie-info .movie-desc .movie-type .movie-cat {
    opacity: .6;
}
.movie-info .movie-desc .movie-type .movie-tag {
    border-radius: .04rem;
    margin-left: .08rem;
    vertical-align: text-bottom;
    display: flex;
    align-items: center;
}
.movie-info .movie-desc .movie-type .movie-tag img {
    height: .28rem;
}
.img.noneBg {
    background: none;
}
.movie-info .movie-desc .movie-show-time span {
    opacity: .6;
    font-size: .24rem;
}
.movie-info .movie-desc .btns .button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsla(0,0%,100%,.35);
    box-shadow: 0 0.02rem 0.08rem 0 rgb(0 0 0 / 10%);
    border-radius: .08rem;
    font-size: .28rem;
    width: 47.61904762%;
    height: .6rem;
    color: #fff;
}
.movie-page button {
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    background-color: transparent;
}
.movie-info .movie-desc .btns .button img {
    width: .28rem;
    height: .28rem;
    margin-right: .12rem;
}
.img.noneBg {
    background: none;
}
.img {
    border: 0;
    display: inline-block;
}
.movie-info .movie-cover img.poster {
    height: 2.76rem;
    width: 100%;
}
.movie-info .movie-cover img.poster-play {
    height: .6rem;
    width: .6rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.brief-introduction>.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brief-introduction>.title>span {
    font-size: .3rem;
}
.brief-introduction>.title>div button {
    font-size: .24rem;
    opacity: .6;
    color: #fff;
    width: .9rem;
}
.movie-page button {
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    background-color: transparent;
}
.brief-introduction>.title>div button.open img {
    transform: rotate(
90deg
);
}
.brief-introduction>.title>div button.close img {
    transform: rotate(
-90deg
);
}
.brief-introduction>.title>div button img {
    width: .1rem;
    height: .16rem;
    margin-left: .12rem;
}
.brief-introduction>.title>div button {
    font-size: .24rem;
    opacity: .6;
    color: #fff;
    width: .9rem;
}
.brief-introduction>.content {
    font-size: .3rem;
    line-height: .52rem;
    overflow: hidden;
}
.brief-introduction:after {
    content: "";
    display: table;
}
.brief-introduction>.content p.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
.brief-introduction>.content p {
    margin: .14rem 0;
    text-align: justify;
}
.actors .title {
    font-size: .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.actors .actor-list {
    margin-top: .22rem;
}
.actors .title .go-to-all-actors {
    opacity: .6;
    font-size: .24rem;
}
.actors .title .go-to-all-actors img {
    width: .1rem;
    height: .16rem;
    margin-left: .12rem;
}
.actors .actor-list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
}
.movie-page ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.actors .actor-list ul li {
    flex-shrink: 0;
    display: list-item;
    text-align: -webkit-match-parent;
}
.actors .actor-list ul li.left-margin {
    margin-left: .12rem;
}
.actors .actor-list ul li {
    flex-shrink: 0;
}
.actors .actor-list ul li>a img {
    width: 1.6rem;
    height: 2.24rem;
    display: block;
    background: none;
}
.actors .actor-list ul li>a .name, .actors .actor-list ul li>a .role {
    font-size: .24rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: center;
}
.actors .actor-list ul li>a .role {
    opacity: .4;
}
.movie-page a {
    text-decoration: none;
    color: inherit;
}
.actors .actor-list ul li>a {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 1.64rem;
}
.actor-list ul li:first-of-type {
    margin-left: 0 !important;
}
.photos {
    margin-top: .36rem;
    padding: 30px 0 10px 0;
}
.photos .photos-list ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
}
.photos .photos-list ul li.left-margin {
    margin-left: .16rem;
}
.photos .photos-list ul li {
    flex-shrink: 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.photos .photos-list ul li img {
    width: 2.8rem;
    height: 1.86rem;
}
.photos .photos-list {
    margin-top: .22rem;
}
</style>
<script>
import Vue from 'vue'
// import Toplogo from '../components/Toplogo'
import http from '@/Util/http'
import moment from 'moment'
import { ImagePreview } from 'vant'
import ItemToplogo from '../components/ItemToplogo.vue'
import { mapMutations } from 'vuex'
Vue.filter('Datefilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD HH:SS')
})
export default {
  components: {
    ItemToplogo
  },
  data () {
    return {
      open: true,
      close: false,
      line: true,
      items: [],
      actors: []
    }
  },
  methods: {
      ...mapMutations('Showhidebar',['toplogohide','topbarhide','buttomhide','toplogoshow','topbarshow','buttomshow']),
    show () {
      this.open = !this.open
      this.close = !this.close
      this.line = !this.line
    },
    Preview (index) {
      ImagePreview({
        images: this.items.photos,
        startPosition: (index),
        closeable: true
      })
    }
  },
  mounted () {
    http({
      url: `/gateway?filmId=${this.$route.params.filmId}&k=579269`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      },
      method: 'get'
    }).then(res => {
      this.items = res.data.data.film
      console.log(res.data.data.film)
      this.actors = res.data.data.film.actors.map(item => item.name)
    })
    this.toplogohide()
    this.topbarhide()
    this.buttomhide()
    // this.$store.commit('toplogohide')
    // this.$store.commit('topbarhide')
    // this.$store.commit('buttomhide')
  },
  beforeDestroy () {
      this.toplogoshow()
      this.topbarshow()
      this.buttomshow()
    // this.$store.commit('toplogoshow')
    // this.$store.commit('topbarshow')
    // this.$store.commit('buttomshow')
  }

}
</script>
